import React, { useEffect } from 'react';
import { Space, Button, Form, Input, Select } from '@arco-design/web-react';
import { bottomMoldTypeOpt } from '@/pages/resources/common';

const FormItem = Form.Item;
const Option = Select.Option;

interface Props {
  onSearch: (params: any) => void;
}

function Search(props: Props) {
  const { onSearch } = props;

  const [form] = Form.useForm();
  const reset = () => {
    form.resetFields();
    onSearch({});
  };

  useEffect(() => {
    form.resetFields();
  }, []);
  return (
    <Form
      form={form}
      autoComplete="off"
      layout="inline"
      style={{ marginTop: '20px' }}
      onSubmit={(values) => {
        onSearch(values);
      }}
    >
      <Space wrap size={[20, 20]}>
        <FormItem label="模型编号" field="ModelNum">
          <Input placeholder="输入模型编号" />
        </FormItem>
        <FormItem label="模型名称" field="ModelName">
          <Input placeholder="输入模型名称" />
        </FormItem>
        <FormItem label="底膜类型" field="BottomMoldTypes">
          <Select
            mode="multiple"
            placeholder="选择底膜类型"
            allowClear
            maxTagCount={3}
            onChange={() => {
              form.submit();
            }}
          >
            {bottomMoldTypeOpt.map((option) => (
              <Option key={option.value} value={option.value}>
                {option.label}
              </Option>
            ))}
          </Select>
        </FormItem>

        <FormItem label="校园账号" field="UserName">
          <Input placeholder="输入校园账号" />
        </FormItem>

        <FormItem>
          <Space size={20}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </FormItem>
      </Space>
    </Form>
  );
}

export default Search;
